﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grids - Export to JSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "IntegralUITreeGridService", function($scope, $gridService){
				$scope.gridName = "gridSample";
				$scope.exportType = 'flat';

				$scope.columns = [
					{ headerText: 'Header1', footerText: 'Footer1', width: 200 },
					{ headerText: 'Header2', footerText: 'Footer2', width: 250 },
					{ headerText: 'Header3', footerText: 'Footer3', width: 120 }
				];

				$scope.rows = [
					{ 
						id: 1,
						text: "Item1",
						cells: [{ text: "Item11" }, { text: "Item12" }, { text: "Item13" }],
						rows: [
							{ id: 11, pid: 1, text: "Item11", cells: [{ text: "Item111" }, { text: "Item112" }, { text: "Item113" }] },
							{ 
								id: 12,
								pid: 1,
								text: "Item12",
								cells: [{ text: "Item121" }, { text: "Item122" }, { text: "Item123" }],
								rows: [
									{ id: 121, pid: 12, text: "Item121", cells: [{ text: "Item1211" }, { text: "Item1212" }, { text: "Item1213" }] },
									{ 
										id: 122,
										pid: 12,
										text: "Item122", 
										cells: [{ text: "Item1221" }, { text: "Item1222" }, { text: "Item1223" }],
										expanded: false,
										rows: [
											{ id: 1221, pid: 122, text: "Item1221", cells: [{ text: "Item12211" }, { text: "Item12212" }, { text: "Item12213" }] },
											{ id: 1222, pid: 122, text: "Item1222", cells: [{ text: "Item12221" }, { text: "Item12222" }, { text: "Item12223" }] }
										]
									},
									{ id: 123, pid: 12, text: "Item123", cells: [{ text: "Item1231" }, { text: "Item1232" }, { text: "Item1233" }] }
								]
							},
							{ id: 13, pid: 1, text: "Item13", cells: [{ text: "Item131" }, { text: "Item132" }, { text: "Item133" }] },
							{
								id: 14,
								pid: 1,
								text: "Item14",
								cells: [{ text: "Item141" }, { text: "Item142" }, { text: "Item143" }],
								rows: [
									{ id: 141, pid: 14, text: "Item141", cells: [{ text: "Item1411" }, { text: "Item1412" }, { text: "Item1413" }] },
									{ id: 142, pid: 14, text: "Item142", cells: [{ text: "Item1421" }, { text: "Item1422" }, { text: "Item1423" }] }
								]
							}
						]
					},
					{
						id: 2,
						text: "Item2",
						cells: [{ text: "Item21" }, { text: "Item22" }, { text: "Item23" }],
						expanded: false,
						rows: [
							{ id: 21, pid: 2, text: "Item21", cells: [{ text: "Item211" }, { text: "Item212" }, { text: "Item213" }] },
							{ id: 22, pid: 2, text: "Item22", cells: [{ text: "Item221" }, { text: "Item222" }, { text: "Item223" }] },
							{
								id: 23,
								pid: 2,
								text: "Item23", 
								cells: [{ text: "Item231" }, { text: "Item232" }, { text: "Item233" }],
								expanded: false,
								rows: [
									{ id: 231, pid: 23, text: "Item231", cells: [{ text: "Item2311" }, { text: "Item2312" }, { text: "Item2313" }] },
									{ id: 232, pid: 23, text: "Item232", cells: [{ text: "Item2321" }, { text: "Item2322" }, { text: "Item2323" }] }
								]
							}
						]
					},
					{ id: 3, text: "Item3", cells: [{ text: "Item31" }, { text: "Item32" }, { text: "Item33" }] }
				];
				
				$scope.$watch("exportType", function(newValue, oldValue){
					if (newValue != oldValue){

					}
				});

				var columnFields = [ 'headerText' ];
				var rowFields = [ 'id', 'pid', 'cells', 'text' ];

				$scope.export = function(){
					var output = $gridService.exportToJSON($scope.gridName, columnFields, rowFields, $scope.exportType == 'flat', 3);

					console.clear();
					console.log(output);
				}

			}]);
    </script>
    <style type="text/css">
		.control-panel
		{
			margin-left: 35px;
			width: 250px;
		}
		.feature-content
		{
			width: 900px;
		}
        .directive
        {
        	border: thin solid #dadada;
        	width: 600px;
        	height: 350px;
        }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span class="product-name">IntegralUI</span> Studio <span class="product-platform">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Grids / Export to JSON</h2>
	        <div class="feature-content">
                <iui-treegrid name="{{gridName}}" class="directive" columns="columns" rows="rows" ></iui-treegrid>
                <div class="control-panel">
					<label>Choose Data Structure Type:</label><br /><br />
					<label><input type="radio" ng-model="exportType" value="flat" />Flat List</label>
					<label><input type="radio" ng-model="exportType" value="tree" />Tree Hierarchy</label>
					<br /><br /><br />
					<button ng-click="export()">Export to JSON</button>
                </div>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>This example presents how to export the data of TreeGrid to a JSON formatted string. You can export the data either as a flat list or a tree hierarchy, using only fields that you want to have exported.</p>
                    <p><span class="initial-space"></span>In our example, although each column has also a 'footerText' field set, only the 'headerText' will be exported. As for rows, only their 'id', 'pid', text' and 'cells' fields will be exported. You can filter which fields you want to include in the final output in your code. The final result is shown in console window.</p>
                    <p><span class="initial-space"></span>To export data, the following method is used:</p>
                        <ul class="feature-points">
                            <li><span style="color:#c60d0d">exportToJSON(name, columnFields, rowFields, flat, spacing)</span> - exports the content of TreeGrid to a JSON formatted string</li>
                        </ul>
                    </p>
                    <p><span class="initial-space"></span>For more information check out the source code of this sample.</p>
                    <p><span class="initial-space"></span>You can use exported data to populate the TreeGrid on demand from local or remote data source, by simply providing it as parameter to the loadData method.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
